<template>
    <Row>
        <Col v-if="username" class="panel">
            <Row class="avatarArea" type="flex" justify="center">
                <Col>
                    <Avatar class="avatar" shape="square" icon="md-person" solt="icon" />
                </Col>
            </Row>
            <Row class="name" type="flex" justify="center">
                <Col>
                    {{username}}
                </Col>
            </Row>
            <Row class="desc">
                <Col>
                    <Row type="flex" justify="start" class="col">
                        <Col class="label">姓名：</Col>
                        <Col class="value">423432</Col>
                    </Row>
                    <Row type="flex" justify="start" class="col">
                        <Col class="label">性别：</Col>
                        <Col class="value">男</Col>
                    </Row>
                </Col>
            </Row>
            <Row type="flex" justify="center">
                <Col>
                    <Row>
                        <Col>
                            <Button @click="send">发消息</Button>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </Col>
        <Col v-else>
            <Row class="title" style="height: 46px;">
                <Col>
                </Col>
            </Row>
        </Col>
    </Row>
</template>

<script>
    export default {
        name: 'ViewFriend',
        components: {},
        props: {
            username: ''
        },
        data () {
            return {

            };
        },
        methods: {
            send () {
                let message = {username: this.username};
                this.$emit('on-send', {isNew: false, message});
            },
            viewCustom () {

            }
        }
    };
</script>

<style scoped lang="less">
    @avatarWidth: 64px;
    .panel {
        padding: 32px 16px;
    }
    .avatarArea {
        padding: 8px 0;
    }
    .avatar {
        width: @avatarWidth;
        height: @avatarWidth;
        line-height: @avatarWidth;
    }
    .name {
        font-size: 16px;
        padding: 8px 0;
     }
    .desc {
        padding: 8px 0;
    }
    .col {
        padding: 4px 0;
    }
    .label {
        width: 50%;
        text-align: right;
    }
    .value {
        width: 50%;
    }
</style>
